<template>
  <div class="w-full">
    <input :id="`${props.field}fileRef`" name="file" type="file" style="display: none" multiple @change="handleFileUpload" />
    <div
      type="primary"
      class="w-full rounded min-h-[100px] cursor-pointer border border-dashed border-[#ccc]"
      @click="upload"
    >
      <div class="h-[100px] flex flex-col justify-center truncate">
        <div v-if="fileList.length < props.limit" class="flex flex-col justify-center items-center flex-1">
          <el-icon color="#ccc" size="35px"><UploadFilled /></el-icon>
          <div class="w-full flex justify-center items-center text-xs text-[#ccc]">{{ props.btnText }}</div>
        </div>
        <ul class="w-full flex flex-col justify-center px-2">
          <li v-for="(file, index) in fileList" v-bind:key="file.url" class="flex justify-center items-center">
            <el-link :href="file.url" :underline="false" target="_blank">
              <span class="text-[var(--el-text-color-regular)] hover:text-[#409EFF]"> {{ file.name }} </span>
            </el-link>
            <el-icon color="red" class="ml-2" @click.stop="handleDelete(index)"><Delete /></el-icon>
<!--            <el-button type="danger" link @click.stop="handleDelete(index)">删除</el-button>-->
          </li>
        </ul>
      </div>
    </div>
<!--    <el-button v-if="fileList.length < props.limit" type="primary" size="default" @click="upload">{{ props.btnText }}</el-button>-->

  </div>
</template>

<script setup>
import { add } from '@/utils/setting.js'
import useI18n from "@/i18n/index.js";

const props = defineProps({
  modelValue: [String, Object, Array],
  field: {
    type: String,
    default: 'normal'
  },
  privateFlag: {
    type: String,
    default: 'public-qiniu-kodo' // 公有public-qiniu-kodo 私有private-qiniu-kodo
  },
  showType: {
    type: String,
    default: 'text' // text / picture-card
  },
  btnText: {
    type: String,
    default: useI18n.global.t('customUpload.index.617036-0')
  },
  limit: {
    type: Number,
    default: 5
  }, // 数量限制
  fileSize: {
    type: Number,
    default: 10
  }, // 大小限制(MB)
  fileType: {
    type: Array,
    default: () => ['svg']
  }, // 文件类型, 例如['png', 'jpg', 'jpeg']
  isShowTip: {
    type: Boolean,
    default: true
  }, // 是否显示提示
  pictureCardSize: {
    type: Number,
    default: 50
  }
})
const emit = defineEmits(['update:modelValue'])
const fileList = ref([])

const upload = () => {
  if (fileList.value.length < props.limit) {
    const clickDom = document.getElementById(`${props.field}fileRef`)
    clickDom.click()
  }
}

const handleFileUpload = (event) => {
  const files = Array.from(event.target.files);
  const sizeFlag = files.some(item => { return item.size })
  if (!sizeFlag) {
    event.target.value = ''
    return ElMessage.error(useI18n.global.t('customUpload.index.617036-1'));
  }
  if(add(files.length, fileList.value.length) > props.limit) {
    event.target.value = ''
    return ElMessage.error(useI18n.global.t('customUpload.index.617036-2', [props.limit]))
  }
  // 校检文件类型
  if (props.fileType.length) {
    const fileTypeFlag = files.some(item => {
      const fileName = item.name.split('.')
      const fileExt = fileName[fileName.length - 1]
      return props.fileType.indexOf(fileExt) >= 0
    })
    if(!fileTypeFlag) {
      event.target.value = ''
      return ElMessage.error(useI18n.global.t('customUpload.index.617036-3', [props.fileType.join('/')]));
    }
  }
  if (props.fileSize) {
    const fileSizeFlag = files.some(item => {
      return item.size / 1024 / 1024 < props.fileSize
    })
    if(!fileSizeFlag) {
      event.target.value = ''
      return ElMessage.error(useI18n.global.t('customUpload.index.617036-4', [props.fileSize]));
    }
  }
  files.forEach(file => {
    fileList.value.push(file)
  })
  event.target.value = ''
}

const handleDelete = (index) => {
  fileList.value.splice(index, 1)
}

watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    fileList.value = Array.isArray(newValue) ? newValue : [newValue]
  } else {
    fileList.value = []
  }
}, { deep: true, immediate: true })

watch(() => fileList.value, (newValue) => {
  emit('update:modelValue', newValue)
}, { deep: true })
</script>

<style scoped lang="scss">

</style>